<template>
  <!-- <h1>Hello Router App</h1>
  <p>我访问的当前路由地址是什么？ {{ $route.fullPath }}</p> -->
  <!-- {{ $router.options.routes }} -->
  <!-- <div v-for="(item ,index) in $router.options.routes" :key="index">
    <span>{{ item.name }}</span>
    <span style="font-size: 30px; color: red;">{{ item.meta.title }}</span>

  </div> -->
  <nav class="footer_wrap">
    <!-- 跳转路由 -->
    <!-- <RouterLink to="/">首页</RouterLink> &nbsp; &nbsp;
    <RouterLink to="/about">关于我们</RouterLink> -->

    <a href="/">首页</a>
    <a href="/find">发现音乐</a>
    <a href="/my">我的音乐</a>
    <a href="/friend">关注</a>
    <a href="/musician">音乐人</a>

    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/find">发现音乐</RouterLink>
    <RouterLink to="/my">我的音乐</RouterLink>
    <RouterLink to="/friend">关注</RouterLink>
    <RouterLink to="/musician">音乐人</RouterLink>
  </nav>


  <main>
    <RouterView></RouterView> <!--  路由出口 是所有路由页面的总出口必须加载 -->
  </main>
</template>
<script setup>

</script>
<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}

.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}

.footer_wrap a:hover {
  background-color: #555;
}

.top {
  padding-top: 62px;
}
main{
  margin-top: 75px;
  font-size: 20px;
}
</style>
